import React, { Component } from 'react';
import sub from './subCard.module.scss'
import { withRouter } from 'react-router-dom'
import { getSubCardView } from '../../utils/interface'
import { getUrlParam } from '../../utils/tools'
import { divide } from '../../utils/maths'
import p2 from '../../static/p2.png'
import fumuka2 from '../../static/fumuka2.png'
import zinvka2 from '../../static/zinvka2.png'
import qinglvka2 from '../../static/qinglvka2.png'
let scroll = 0
class SubCardList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: []
        }
    }
    render() {
        const img = function (i) {
            if (i === 1) {
                return (<img src={fumuka2}></img>)
            }
            if (i === 2) {
                return (<img src={qinglvka2}></img>)
            }
            if (i === 3) {
                return (<img src={zinvka2}></img>)
            }
        }
        return (
            <div className={sub.suncradList}  onScroll={this.handleScroll.bind(this)}  ref="bodyBox">
                <p className={sub.title}>亲属卡</p>
                {this.state.list.map((item, idx) => {
                    return (
                        <div className={sub.item} key={idx} onClick={this.goInfo.bind(this, item.memberCardId)}>
                            <div className={sub.top}>
                                {img(item.subCardType)}
                                <span>{item.subCardTypeName}</span>
                            </div>
                            <div className={sub.bottom}>
                                <div className={sub.box}>
                                <p>{item.realName}</p>
                                <div className={sub.left}>
                                    <img src={p2} />
                                    <span>{item.phone}</span>
                                </div>
                                </div>
                                <div className={sub.right}>
                                    <p>
                                        <i>￥</i>
                                        {item.payLimit}
                                    </p>
                                    <span>本月已用 ￥{item.orderAmount}</span>
                                </div>
                            </div>
                        </div>
                    )
                })}
                <div className={sub.addItem} onClick={this.go_subCard.bind(this)}>
                    <span>+</span>
                    <p>赠送亲属卡</p>
                </div>
            </div>
        );
    }
    go_subCard() {
        this.props.history.push('/subCard?cardId=' + getUrlParam('cardId') + '&phone=' + getUrlParam('phone'))
        
    }
    getList() {
        getSubCardView({ mainCardId: getUrlParam('cardId') }).then(res => {
            res.data.result.data.map(item => {
                item.payLimit = divide(item.payLimit, 100)
                item.orderAmount = divide(item.orderAmount, 100)
            })
            this.setState({
                list: res.data.result.data
            })
            let s = localStorage.getItem("scroll")
            this.refs.bodyBox.scrollBy(0,s)
        })
    }
    goInfo(id) {
        this.props.history.push('/subCardInfo?subCardId=' + id + '&phone=' + getUrlParam('phone'))
    }
    handleScroll(e){  
      scroll  = this.refs.bodyBox.scrollTop;  //滚动条滚动高度
      localStorage.setItem("scroll",scroll)
    }
  

    componentDidMount() {

        this.getList()

        document.title = "亲属卡概览"
    }
    componentWillMount (){
      console.log("卸载")
    }
   
}
export default withRouter(SubCardList);